<template>
    <!-- 搜索 -->
  <div class="search_box">
    <el-card size="large">
      <el-row :gutter="20">
        <el-col :span="6">
          <span>活动名称</span>
          <el-input size="large" v-model="eventSearchData.activityName" placeholder="请输入搜索活动名称"></el-input>
        </el-col>
        <el-col :span="6">
          <span>活动编号</span>
          <el-input size="large" v-model="eventSearchData.communityNumber" placeholder="请输入搜索活动编号"></el-input>
        </el-col>
        <el-col :span="6">
          <span>活动时间</span>
          <el-date-picker size="large"
              v-model="eventSearchData.activityTime"
              type="date"
              placeholder="Pick a day"
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handlerSearch" size="large">搜索</el-button>
          <el-button @click="handlerReset" size="large">重置</el-button>
          <el-button type="primary" @click="handlerAdd" size="large">添加</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <!-- 列表区域 -->
  <div class="list_box">
    <!-- 表格 -->
    <el-card  class="box-card">
        <el-table :data="filterTableData" border style="width: 100%" size="large">
          <el-table-column label="社团活动ID" prop="event_id" width="150" />
          <el-table-column label="社团编号" prop="club_id" width="100" />
          <el-table-column label="社团名称" prop="club_name" width="200" />
          <el-table-column label="活动名称" prop="event_name" width="200" />
          <el-table-column label="报名时间" prop="signup_time" width="150" />
          <el-table-column label="活动时间" prop="event_time" width="150" />
          <el-table-column label="参加人数" prop="participants_count" width="120" />
          <el-table-column label="活动地址" prop="event_address" width="250" />
          <el-table-column label="活动封面" prop="event_cover" width="250" />
          <el-table-column label="社团团长" prop="club_leader" width="120" />
          <el-table-column label="活动简介" prop="event_description" width="300" />
          <el-table-column label="审核状态" prop="approval_status" width="120" />
          <el-table-column label="创建时间" prop="created_time" width="150" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                详情
              </el-button>
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      <div class="pagination-block">
        <el-pagination
            size="large"
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
const tableData = [
  {
    event_id: '1',
    club_id: '1001',
    club_name: '科技爱好者俱乐部',
    event_name: '编程工作坊',
    signup_time: '2023-04-01',
    event_time: '2023-04-15',
    participants_count: 20,
    event_address: '科技大厦301室',
    event_cover: 'http://example.com/cover1.jpg',
    club_leader: '张伟',
    event_description: '学习最新的编程技术',
    approval_status: '已审核',
    created_time: '2023-03-30',
  },
  {
    event_id: '2',
    club_id: '1002',
    club_name: '摄影俱乐部',
    event_name: '摄影比赛',
    signup_time: '2023-05-01',
    event_time: '2023-05-20',
    participants_count: 15,
    event_address: '艺术中心展览厅',
    event_cover: 'http://example.com/cover2.jpg',
    club_leader: '李静',
    event_description: '展现你的摄影技巧',
    approval_status: '待审核',
    created_time: '2023-04-10',
  },
  // 更多数据项...
]
const eventSearchData = ref({
  communityName: '',
  communityNumber:'',
  activityName: '',
  activityTime: ''
})
const handlerSearch = () => {
  console.log(eventSearchData.value)
}
const handlerReset = () => {
  console.log(eventSearchData.value)
}
const handlerAdd = () => {
  console.log(eventSearchData.value)
}
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.club_name.toLowerCase().includes(search.value.toLowerCase()) ||
            data.event_name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
const queryFrom={

}

</script>
<style scoped lang="scss">
.box-card{
  position: relative;
  min-height: 76vh;
}
.list_box {
  margin: 20px 0;
}
.pagination-block{
  position: absolute;
  bottom: 3rem;
  left: 4rem;
  margin-top: 1rem;
}
.search_box {
  .el-col {
    display: flex;
    align-items: center;

    span {
      width: 120px;
      text-align: right;
      margin-right: 10px;
      text-wrap: nowrap;
    }
  }
}
</style>
